<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>大屏展示</title>
    <script type="text/javascript" th:src="@{/source/js/jquery.min.js}" src="js/jquery.min.js"></script>
    <script type="text/javascript" th:src="@{/source/js/echarts.min.js}" src="js/echarts.min.js"></script>
    <style>
        body {
            background: linear-gradient(to bottom, #f7b2a9, #a3d7ff);
            color: whitesmoke;
            transition: background 1s ease; /* 添加过渡效果 */
        }

        table {
            margin: 0 auto;
            text-align: center;
        }

        th, td {
            padding: 10px;
            text-align: center;
        }

        .photo-wrapper {
            display: flex;
            justify-content: center;
        }

        .photo-wrapper img {
            animation: jump 0.5s ease-in-out infinite alternate;
        }

        @keyframes jump {
            from {
                transform: translateY(0);
            }
            to {
                transform: translateY(-10px);
            }
        }
    </style>
    <script>
        $(document).ready(function () {
            // 初始化圆柱统计图
            var myChart = echarts.init(document.getElementById('data-chart'));

            var option = {
                tooltip: {},
                xAxis: {
                    data: ['A得票', 'B得票']
                },
                yAxis: {
                    show: false // 不显示 Y 轴
                },
                series: [{
                    type: 'bar',
                    barWidth: '40%', // 圆柱宽度
                    data: [0, 0],
                    itemStyle: {
                        color: 'rgb(246,94,74)'
                    }
                }]
            };

            myChart.setOption(option);

            // 更新圆柱统计图数据
            function updateChart(votesA, votesB) {
                myChart.setOption({
                    series: [{
                        data: [votesA, votesB]
                    }]
                });
            }

            setInterval(function () {
                $.ajax({
                    url: '/getLatestPKOnScreen', // 向后端发送请求的URL
                    method: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        $('#data-groupId').text(data.groupId).val(data.groupId);
                        $('#data-usernameA').text(data.usernameA);
                        $('#data-photoA').attr('src', '/source/uploadfiles/' + data.photoA).siblings('input[type="hidden"]').val(data.userAId).data('groupId', data.groupId);
                        $('#data-photoB').attr('src', '/source/uploadfiles/' + data.photoB).siblings('input[type="hidden"]').val(data.userBId).data('groupId', data.groupId);
                        $('#data-usernameB').text(data.usernameB);
                        $('#data-votesA').text(data.votesA);
                        $('#data-votesB').text(data.votesB);
                        updateChart(data.votesA, data.votesB);
                    },
                    error: function () {
                        console.log('投票未开始！');
                    }
                });
            }, 2000); // 每2秒钟发送一次请求

            // 改变背景颜色
            var colors = ['#f7b2a9', '#d7a9ff'];
            var index = 0;
            setInterval(function () {
                index = (index + 1) % colors.length;
                var color = colors[index];
                $('body').css('background', 'linear-gradient(to bottom, ' + color + ', ' + color + ')'); // 改变背景色
            }, 5000); // 每5秒钟改变一次背景色
        });
    </script>
</head>
<body>
<h2 style="text-align: center;">快为你喜欢的歌手投票加油！</h2>
<input id="data-groupId" type="hidden" name="groupId" value="">
<table id="data-table">
    <thead>
    <tr>
        <th>A得票</th>
        <th>选手A</th>
        <th></th>
        <th> 选手B</th>
        <th>B得票</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <div>
                <span id="data-votesA" name="data-votesA"></span>
            </div>
        </td>
        <td>
            <div class="photo-wrapper">
                <img id="data-photoA" class="photo" src="" alt="">
                <input type="hidden" name="userAId" value="">
            </div>
        </td>
        <td>VS</td>
        <td>
            <div class="photo-wrapper">
                <img id="data-photoB" class="photo" src="" alt="">
                <input type="hidden" name="userBId" value="">
            </div>
        </td>
        <td>
            <div>
                <span id="data-votesB" name="data-votesB"></span>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <span></span>
            </div>
        </td>
        <td>
            <div>
                <span id="data-usernameA" name="data-usernameA"></span>
            </div>
        </td>
        <td></td>
        <td>
            <div>
                <span id="data-usernameB" name="data-usernameB"></span>
            </div>
        </td>
        <td>
            <div>
                <span></span>
            </div>
        </td>
    </tr>
    </tbody>
</table>
<div id="data-chart" style="height: 300px;"></div>
</body>
</html>